<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>原生实现过度</title>
		<style>
			.picture{
				width: 100px;
				transition: 1s all linear;
			}
			.leave{
				opacity: 0;
				transform: scale(0) rotate(180deg);
			}
			.come{
				opacity: 1;
				transform: scale(1) rotate(0deg);
			}
		</style>
	</head>
	<body>
		<div>
			<button onclick="change()">切换</button> <br/><br/>
			<img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" class="picture" alt="">
		</div>

		<script type="text/javascript" >
			let isShow = true
			function change(){
				const img = document.querySelector('.picture')
				if(isShow) img.className = "picture leave"
				else img.className = "picture come"
				isShow = !isShow
			}
		</script>
	</body>
</html>